<template>
  <div>
    <van-popup
      class="receiving-parts-popup task-handle-popup"
      v-bind="$attrs"
      position="right"
      :style="{ width: '100%', height: '100%' }"
      v-on="$listeners"
      get-container="body"
    >
      <van-nav-bar
        class="gm-nav-bar"
        left-text="领用部品"
        left-arrow
        @click-left="$emit('input', false)"
      >
        <template #right>
          <van-button
            class="nav-btn"
            icon="plus"
            plain
            type="info"
            @click="addPartsPopupShow = true"
          >
            添加部品
          </van-button>
        </template>
      </van-nav-bar>
      <div class="desc-label">已选择部品：</div>

      <div class="card-wrap van-hairline--top">
        <div class="toast-text" v-show="list.length === 0">
          点击右上角按钮添加部品
        </div>
        <div
          class="gm-border-card"
          v-for="(item, index) in list"
          :key="item.Id"
        >
          <van-cell class="gm-border-card-header" :title="item['仓库名称']">
            <template #icon>
              <van-icon
                class="van-cell__left-icon"
                name="delete-o"
                color="#e80e0e"
                style="margin-top: -1px"
                @click="delItem(index)"
              />
            </template>
            <template #right-icon>
              <van-stepper
                v-model="item.Number"
                button-size="24"
                :min="0"
                :max="parseFloat(item['可用量']).toFixed(2)"
              />
            </template>
          </van-cell>
          <van-row class="text-row" gutter="20">
            <van-col span="12"> 仓库代码：{{ item["仓库代码"] }} </van-col>
            <van-col span="12"> 物料代码：{{ item["物料代码"] }} </van-col>
          </van-row>
          <van-row class="text-row" gutter="20">
            <van-col span="12"> 物料名称：{{ item["物料名称"] }} </van-col>
            <van-col span="12"> 规格型号：{{ item["规格型号"] }} </van-col>
          </van-row>
          <van-row class="text-row" gutter="20">
            <van-col span="12"> 描述：{{ item["描述"] }} </van-col>
            <van-col span="12">
              可用量：{{ parseFloat(item["可用量"]).toFixed(2) }}
            </van-col>
          </van-row>
        </div>
      </div>

      <van-row class="btns-fixed-bottom" gutter="20">
        <van-col span="12">
          <van-button type="default" block @click="handleCancel">
            取消
          </van-button>
        </van-col>
        <van-col span="12">
          <van-button type="info" block @click="handleConfirm">
            确定
          </van-button>
        </van-col>
      </van-row>
    </van-popup>
    <add-parts-popup
      v-model="addPartsPopupShow"
      :activeData="activeData"
      @confirm="addData"
    />
  </div>
</template>

<script>
import { Pad_Repair_AddRequisition } from "../../api/index";
import { deepClone } from "../../utils";
export default {
  name: "ReceivingPartsPopup",
  inheritAttrs: false,
  props: {
    activeData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      isLoading: false,
      list: [],
      loading: false,
      finished: false,
      testNum: 1,
      addPartsPopupShow: false,
    };
  },
  components: {
    "add-parts-popup": () => import("./AddPartsPopup.vue"),
  },
  methods: {
    addData(data) {
      let newList = [];
      data.forEach((val) => {
        let hasDev = this.list.find((ele) => {
          if (val["物料代码"] === ele["物料代码"]) {
            ele.Number = val.Number + ele.Number;
            return true;
          } else {
            return false;
          }
        });
        if (!hasDev) {
          newList.push(val);
        }
      });
      this.list.push(...deepClone(newList));
      this.addPartsPopupShow = false;
    },
    delItem(index) {
      this.list.splice(index, 1);
    },
    handleCancel() {
      this.$emit("input", false);
    },
    handleConfirm() {
      // 先验证
      if (this.list.find((val) => val.Number === 0)) {
        this.$toast("领用数量不能为0");
      } else {
        const params = {
          RepairId: this.activeData.Id,
          Requisitions: this.list,
        };
        Pad_Repair_AddRequisition(params)
          .then((res) => {
            if (res.ReturnResult === "1") {
              this.$dialog
                .alert({
                  message: res.Message,
                  className: "success",
                })
                .then(() => {
                  this.$emit("confirm");
                  this.$emit("input", false);
                });
            } else {
              this.$notify(res.Message);
            }
          })
          .catch((err) => {
            this.$notify(err);
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-btn {
  color: #1364e1;
  height: 34px;
  background: #f1f5fa;
  border-radius: 4px;
  border: none;
  padding: 0 10px;
  font-size: 13px;
}

.desc-label {
  font-size: 14px;
  padding: 9px 15px;
}

.gm-border-card:first-child {
  margin-top: 0;
}

.card-wrap {
  padding: 0 15px;
  flex: 1;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.toast-text {
  margin: 30px 0;
  text-align: center;
  color: #dcdee0;
}
</style>